import AgoraRTC from 'agora-rtc-sdk'
import AgoraRTM from 'agora-rtm-sdk'
import roomTabs from "@/components/roomTabs/roomTabs.vue";
import * as allUrls from '../../utils/allUrls'
import ws from '../../api/websocket.js'
import {
	init,
	sendData,
	wsClose
} from '../../api/websocket.js'
import {
	getSignHistory,
	anchorInfo,
	updataroom,
	getGift,
	givegift,
	modeStart,
	modeStop,
	onshelve,
	getshelve,
	joinshelve
} from '../../api/liveHall.js'

//设置直播参数
var rtc = {
	client: null,
	joined: false,
	published: false,
	localStream: null,
	remoteStreams: [],
	params: {},
};
//设置个人参数(默认)
var option = {
	appID: "9a005a1f8e0347ec905f2f784cb27b9a",
	channel: "TextChannelName1",
	uid: "1235",
	token: "006de1f4fd7afd246f69e90dda83e7bb951IACtMq3scLcsSPtQ5nGcwCSfqZNeVmGcTJI/7BEfs1yrlq1XNx8AAAAAEAAe6RKypCWCYQEAAQCjJYJh"
};



//聊天室配置
var rtm = {
	client: null,
	channel: null,
}


export default {
	name: "liveRoom",
	components: {
		roomTabs,
		ws,
	},
	data() {
		return {
			//礼物列表
			gift:[],
			isme: false,
			appid: '',
			roominfo: '',
			//发送的消息框内容
			chatInfo: '',
			//聊天内容总览
			chatScreenLive: [],
			screenLoading: true,
			sendInterval: false,
			//循环清弹幕
			displayInertval: '',
			//循环清除聊天池
			clearChatInfo: '',
			//弹幕
			barrage: [],
			//个人信息
			userInfo: {},
			//主播信息
			hostInfo: '',
			//主播个人信息简介
			hostPersonalSum: '',
			isLive: 0, //判断是否已开播
			pointParams: {
				userId: undefined,
				collectionPoint: undefined
			},
			collectionPoint: undefined,
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 表单参数
			form: {
				seckillId: null,
				userId: null,
				seckillName: null,
				startTime: null,
				seckillNum: null,
				endTime: null,
				seckillType: "1",
				memo: null
			},
			mson: false,
			qson: false,
		}
	},
	watch() {},
	created() {
		
		//连接websocket
		this.ForPoints();
	},
	methods: {
		fqms() {
			onshelve(this.form).then(res => {
				this.form = res.data;
				this.mson = true;
				this.$message({
					message: res.msg,
					type: 'success'
				});
				this.title = "秒杀中";
				this.open = false;
			})
		},
		qg() {
			joinshelve({
				seckillId: this.form.seckillId,
				userId: this.$store.state.user.userid,
			}).then(res => {
				this.$message({
					message: res.msg,
					type: 'success'
				});
				this.open = false;
			})
		},
		/** 打开秒杀表单 */
		openms() {
			//this.reset();
			this.open = true;
			this.title = "发起秒杀";
		},
		opengetms() {
			getshelve({
				userId: this.userInfo.userId,
			}).then(res => {
				this.form = res.data;
				this.open = true;
				this.title = "参与秒杀";
			})
		},
		// 表单重置
		reset() {
			this.form = {
				seckillId: null,
				userId: this.userInfo.userId,
				seckillName: null,
				startTime: null,
				seckillNum: null,
				endTime: null,
				seckillType: "1",
				memo: null
			};
		},
		// 取消按钮
		cancel() {
			this.open = false;
			//this.reset();
		},
		start(){
			modeStart({
				cname:option.channel,
				uid:option.uid
			}).then(res => {
				this.$message({
					message: res,
					type: 'success'
				});
			})
		},
		stop(){
			modeStop({
				cname:option.channel,
				uid:option.uid
			}).then(res => {
				this.$message({
					message: res,
					type: 'success'
				});
			})
		},
		sendGift(Giftid){
			givegift({
				getUserId:this.userInfo.userId,
				setUserId:this.$store.state.user.userid,
				giftId:Giftid,
				giftNum:1
			}).then(res => {
				this.$message({
					message:res.msg,
					type: 'success'
				});
			})
		},
		updataRoom(type, val) {
			if (type == "sum") {
				updataroom({
					roomId: this.$route.query.hostName,
					roomSum: val
				}).then(res => {
					this.$message({
						message: "修改成功",
						type: 'success'
					});
				})
			} else if (type == "name") {
				updataroom({
					roomId: this.$route.query.hostName,
					title: val
				}).then(res => {
					this.$message({
						message: "修改成功",
						type: 'success'
					});
				})
			}
		},
		//获取直播间信息
		getroominfo() {
			console.log(this.$route.query.hostName)
			anchorInfo({
				roomId: this.$route.query.hostName
			}).then(res => {
				this.roominfo = res.data;
				this.userInfo = res.data.user;
				this.form.userId = res.data.user.userId;
				option.channel = res.data.roomId.toString();
				option.uid = this.$store.state.user.userid;
				if (this.userInfo.userId == this.$store.state.user.userid) {
					this.isme = true
				} else {
					this.createAudLive();
				}
			})
		},
		//更具用户当前积分领取状态连接ws开始计时或关闭连接，或不开始计时；
		ForPoints() {
			getSignHistory(this.$store.state.user.userid).then(res => {
				if (res.code == 200) {
					this.collectionPoint = res.data.collectionPoint
					if (this.collectionPoint == "3") {
						return;
					} else {
						this.keepWebsocket();
					}
				}
			})
		},
		keepWebsocket() {
			console.log(ws.wsState.getState)
			if (ws.wsState.getState != 1) { //当前websocket连接未连接时重新连接
				init();
			} else { //否则不变

			}
			switch (this.collectionPoint) {
				case "0":
					console.log("0")
					this.createTimer(60000, "1")
					break;
				case "1":
					console.log("1")
					this.createTimer(300000, "2")
					break;
				case "2":
					console.log("2")
					this.createTimer(900000, "3");
					break;
			}
		},
		createTimer(delay, key) {
			console.log("open")
			let that = this;
			setTimeout(function() {
				that.pointParams.userId = that.$store.state.user.userid;
				that.pointParams.collectionPoint = key;
				console.log(that.$store.state.user)
				sendData(JSON.stringify(that.pointParams));
				if (key == "3") {
					wsClose();
				} else {
					that.ForPoints();
				}
				setTimeout(function() {
					that.$message({
						message: ws.wsState.getMessage,
						type: 'success'
					});
				}, 1000);
			}, delay)
		},

		//============主播创建直播客户端=============
		createHostLive(vors) {
			let _this = this;
			debugger
			//直播互动，建议模式为live,若为通信则为rtc
			rtc.client = AgoraRTC.createClient({
				mode: "live",
				codec: "vp8"
			});
			//初始化
			rtc.client.init(option.appID, function() {
				console.log("客户端初始化完成");
				//设置角色=>"host"为主播,"audience"为观众
				rtc.client.setClientRole("host");
				//=======加入频道=======
				console.log(option.channel+"--------"+option.uid)
				rtc.client.join("9a005a1f8e0347ec905f2f784cb27b9a",option.channel.toString(), option.uid.toString(), function(uid) {
					_this.$message.success("创建成功，欢迎您，" + uid);
					rtc.params.uid = uid;
					/* 					AgoraRTC.getDevices(function(devices) {
											debugger
											console.log("first device id", devices[0].deviceId);
										}, function(err) {
											debugger
										}) */
					//角色为主播，发布本地流
					if (vors == "s") {
						rtc.localStream = AgoraRTC.createStream({
							streamID: rtc.params.uid,
							audio: true,
							video: false,
							screen: true,
						});
					} else {
						rtc.localStream = AgoraRTC.createStream({
							streamID: rtc.params.uid,
							audio: true,
							video: true,
							screen: false,
							mirror: false,
						});
					}
					rtc.localStream.setScreenProfile("1080p_2");

					//角色为主播，初始化本地流
					rtc.localStream.init(function() {
						debugger
						rtc.localStream.profile = "1080p_2";
						rtc.localStream.play('localStream2');
						console.log("初始化本地流成功！");
						_this.screenLoading = false;
						var videoid = "video" + uid;
						var video = document.getElementById(videoid);
						video.controls = true;
						video.fluid = true;
						//发布
						rtc.client.publish(rtc.localStream, function(err) {
							_this.$message.error("发布本地流失败！");
							console.error(err);
						})
						/* rtc.client.getLocalVideoStats(callback: function): void */
						rtc.client.getLocalVideoStats(function(localVideoStats) {
							debugger
							for (var uid in localVideoStats) {
								console.log(
									`Video CaptureFrameRate from ${uid}: ${localVideoStats[uid].CaptureFrameRate}`
									);
							}
						});
					}, function(err) {
						//检查是否有摄像头、麦
						_this.$message.error("初始化本地流失败，请检查摄像头和麦是否正常！")
						console.error("init local stream failed ", err);
					})


				}, function(err) {
					_this.$message.error("加入频道失败" + err);
					console.log(err)
				})
			}, (err) => {
				this.$message.error("直播间初始化失败，请检查授权码是否正确");
				console.error(err);
			});
		},
		//============观众加入直播间=================
		createAudLive() {
			let _this = this;
			//直播互动，建议模式为live,若为通信则为rtc
			rtc.client = AgoraRTC.createClient({
				mode: "live",
				codec: "vp8"
			});
			//初始化
			rtc.client.init(option.appID, function() {
				console.log("客户端初始化完成");
				//设置角色=>"host"为主播,"audience"为观众
				rtc.client.setClientRole("audience");
				//加入频道
				rtc.client.join("9a005a1f8e0347ec905f2f784cb27b9a", option.channel, null, function(
					uid) {
					if (!_this.userInfo.username) {
						_this.$message.success("加入频道成功，欢迎您，" + uid);
					} else {
						_this.$message.success("加入频道成功，欢迎您，" + _this.userInfo.name);
					}
					rtc.params.uid = uid;
					//监听远程流
					debugger
					rtc.client.on("stream-added", function(evt) {
						console.log("++++++++++监听到主播流")
						var remoteStream = evt.stream;
						var id = remoteStream.getId();
						if (id !== rtc.params.uid) {
							rtc.client.subscribe(remoteStream, function(err) {
								_this.$message.error("监听远程流失败" + err)
							})
						}
					});
					//监听远程订阅流
					rtc.client.on("stream-subscribed", function(evt) {
						console.log("++++++++++订阅主播流")
						var remoteStream = evt.stream;
						debugger
						console.log(remoteStream.play);
						var id = "video" + remoteStream.getId();
						// Add a view for the remote stream.
						// addView(id);
						// Play the remote stream.
						remoteStream.play('localStream2'); //绑定渲染
						var video = document.getElementById(id);
						video.controls = true;
						video.style.objectFit = "contain";
					})
				}, function(err) {
					_this.$message.error("加入频道失败" + err);
					console.log(err)
				})
			}, (err) => {
				this.$message.error(err);
				console.error(err);
			});
		},
		//离开直播间
		leaveLive() {
			rtc.client.leave(function() {
				rtc.localStream.stop();
				rtc.localStream.close();
				while (rtc.remoteStreams.length > 0) {
					var stream = rtc.remoteStreams.shift();
					var id = stream.getId();
					stream.stop();
					removeView(id);
				}
				console.log("离开频道成功");
			}, function(err) {
				console.log("离开频道失败" + err);
			})
		},
		//下播
		cutLive() {
			let _this = this;
			rtc.client.leave(function() {
				rtc.localStream.stop();
				rtc.localStream.close();
				while (rtc.remoteStreams.length > 0) {
					var stream = rtc.remoteStreams.shift();
					var id = stream.getId();
					stream.stop();
					removeView(id);
				}
				allUrls.updateHostInfo({
					isLive: 0, //0为下播，1为开播
					username: _this.hostInfo.username
				}, 'post').then(res => {
					return res.json();
				}).then(res => {
					if (+res.status === 200) {
						console.log("离开频道成功");
						_this.$message.info('下播成功~');
					} else {
						_this.$message.error("未能正常下播，请联系管理员");
					}
				}).catch(err => {
					console.log(err);
					_this.$message.error("未能正常下播，请联系管理员");
				})
				_this.$router.push({
					path: '/personalCenter',
					query: {
						name: _this.userInfo.name
					}
				})
			}, function(err) {
				console.log("离开频道失败" + err);
			})
		},
		//获取用户类型，判断开播设置
		getUserType() {
			let _userType = this.$route.query.userType;
			if (_userType == 'host') {
				this.userInfo.userType = 'host';
				return new Promise(resolve => {
					//获取主播appid
					allUrls.getAppid({
						username: this.hostInfo.username,
					}, 'post').then(res => {
						return res.json();
					}).then(res => {
						if (+res.status === 200) {
							this.hostInfo.appid = res.data.appid;
							this.userInfo.appid = res.data.appid;
							resolve();
						} else {
							this.$message.error("获取appid失败！");
						}
					}).catch(err => {
						console.log(err);
						this.$message.error("获取appid出现错误");
					})
				}).then(() => {
					if (!this.userInfo.appid) {
						this.$message.warning("你暂未申请直播授权码，还不可以直播哦");
						this.$router.go(-1);
						return false;
					} else {
						if (!this.hostInfo.title) {
							this.$message.warning("你还没填写直播间信息，请填写再开播哦");
							this.$router.go(-1)
						} else {
							// 主播创建直播间
							this.createHostLive();
							this.loginInChat();
						}
					}
				});
			} else {
				this.userInfo.userType = 'audience';
				//    观众方式加入直播间
				this.createAudLive();
				this.loginInChat()
			}
		},
		//登录聊天频道
		loginInChat() {
			rtm.client = AgoraRTM.createInstance(option.appID);
			//监听状态
			rtm.client.on('ConnectionStateChanged', (newState, reason) => {
				console.log('on connection state changed to ' + newState + ' reason: ' + reason);
			});
			//登录聊天频道
			rtm.client.login({
				token: null,
				uid: this.userInfo.username
			}).then(() => {
				rtm.channel = rtm.client.createChannel(option.appID);
				rtm.channel.join().then(() => {
					/* 加入频道成功的处理逻辑 */
					this.$message.success("成功加入聊天室");
					//监听聊天室
					rtm.channel.on('ChannelMessage', ({
						text
					}, senderId) => { // text 为收到的频道消息文本，senderId 为发送方的 User ID
						/* 收到频道消息的处理逻辑 */
						console.log("接收到远程发送的消息");
						this.chatScreenLive.push(senderId + '：' + text);
						this.barrage.push(text);
					});
				}).catch(error => {
					/* 加入频道失败的处理逻辑 */
					this.$message.error("加入聊天室失败")
				});

			}).catch(err => {
				console.log('登录至聊天室失败', err);
			});
		},
		//发送聊天信息
		sendMsg() {
			if (this.chatInfo == '') {
				this.$message.warning("不可发送空消息哦~");
				return false;
			} else {
				rtm.channel.sendMessage({
					text: this.chatInfo
				}).then(() => {
					/* 频道消息发送成功的处理逻辑 */
					this.chatInfo = '';
					//限制发送间隔时间
					this.sendInterval = true;
					this.$nextTick(() => {
						setTimeout(() => {
							this.sendInterval = false;
						}, 1000);
					});

				}).catch(error => {
					/* 频道消息发送失败的处理逻辑 */
					console.log("发送消息失败" + error)
				});
				this.chatScreenLive.push(this.userInfo.username + '：' + this.chatInfo);
				this.barrage.push(this.chatInfo);
			}
		},
		//点击头像进入个人信息中心
		toPersonCenter() {
			this.$router.push({
				path: '/personalCenter',
				query: {
					username: this.userInfo.username
				}
			})
		},
		//定时给弹幕去掉占位
		addDisplay() {
			let a = document.getElementsByClassName('barrageLi');
			for (let i = 0; i < a.length - 1; i++) {
				a[i].classList.add("addDisplay")
			}
		},
		//定时清除聊天池
		clearChatinfo() {
			this.chatScreenLive.clean();
		},
		//获取是否开播状态
		getIsLiveStatus() {
			allUrls.getLiveStatus({
				username: this.hostInfo.username,
			}, 'post').then(res => {
				return res.json();
			}).then(res => {
				if (+res.status === 200) {
					this.isLive = res.data.isLive;
				} else {
					this.$message.error(res.desc);
				}
			}).catch(err => {
				console.log(err);
				this.$message.error("获取直播状态出错！");
			})
		},
	},
	beforeDestroy() {
		this.leaveLive();
		/* 		clearInterval(this.displayInertval);
				clearInterval(this.clearChatInfo); */
	},
	mounted() {
		this.getroominfo();
		getGift().then(res => {
			this.gift = res.rows
			debugger
		})
		/* 		this.getUserInfo();
				this.displayInertval = setInterval(() => {
					this.addDisplay();
				}, 10000);
				this.clearChatInfo = setInterval(() => {
					this.clearChatinfo();
				}, 300000) */
	},
	watch: {
		//对自己发送的聊天内容作重点
		chatScreenLive() {
			//显示至聊天屏幕上
			this.$nextTick(() => {
				let user = this.userInfo.username;
				for (let i = 0; i < this.chatScreenLive.length; i++) {
					let check = this.chatScreenLive[i].indexOf(user)
					if (check === 0) {
						this.$refs.chatli[i].className = 'rainbowFont';
					}
				}
				//使元素滚动至最底部
				this.$refs.chatScreen.scrollTop = this.$refs.chatScreen.scrollHeight
			});
		},
		//发送间隔后，聚焦输入框
		sendInterval() {
			this.$nextTick(() => {
				this.$refs.input.$el.querySelector("input").focus()
			})
		},
		//弹幕发送监听
		barrage() {
			this.$nextTick(() => {
				let a = document.getElementsByClassName('barrageLi');
				for (let i = 0; i < a.length; a++) {
					let c = a[a.length - 1].innerHTML; //获取发送弹幕的内容长度
					console.log(c.length);
					a[a.length - 1].classList.add("barrageAnimate");
					//若弹幕过长，增加显示的秒数
					if (c.length > 5) {
						a[a.length - 1].style.animationDuration = 9 + (c.length - 5) * 0.3 + "s";
					}
				}
			});
		}
	},
}
